<template>
  <div>
    <!--  -->
    <p @click="handleClickFn">我是father中的p</p>
    <Child class="box" id="100" :username="username" ></Child>
  </div>
</template>

<script>
// 透传: 找到父组件中的子组件然后给子组件设置属性, 这些属性会自动添加到子组件模板的根节点上
// 如果给在父组件中给子组件绑定事件, 子组件身上也有事件触发
// 如果给子组件的模板直接是一个孙子组件,这样属性会直接添加到孙子组件的根节点上
// 可以通过在父组件中给子组件传递动态数据, 然后在子组件中不使用props 接收, 那么传递的数据会添加到子组件
// 实例的$attrs 属性, 这样就可以在子组件中通过this.$attrs.属性访问父组件透传过来的属性了

import Child from '@/views/touchuan/Child.vue'
  export default {
    name:'',
    data () {
      return {
           username:'李易峰'
      };
    },

    components: {
        Child 
    },
    methods: {
        handleClickFn() {
            console.log('事件');
            this.username ='吴亦凡'
        }
    }


  }

</script>
<style scoped>
  p{
    background: red;
  }
</style>